<!DOCTYPE html>
<html>
    <head>
        <script src="./js/chart-2.9.4.js"></script>
    </head>
    <body>
        <!-- <canvas id="demo" style="width: 100%; max-width: 700px;"></canvas>
       <script>
         var xyValues = [
            {x:50,y:7},
            {x:60,y:8},
            {x:70,y:8},
            {x:80,y:9},
            {x:90,y:9},
            {x:100,y:9},
            {x:110,y:10},
            {x:120,y:11},
            {x:130,y:14},
            {x:140,y:14},
            {x:150,y:15},
        ]

        new Chart("demo",{
            type:"scatter",
            data:{
                datasets:[{
                    pointRadius:4,
                    pointBackgroundColor:"rgb(0,0,255)",
                    data:xyValues
                }]
            },
            options:{
                legend:{display:false},
                scales:{
                    xAxes:[{ticks:{min:40,max:160}}],
                    yAxes:[{ticks:{min:6,max:16}}]
                }
            }
        })

       </script> -->
       <canvas id="demo1"></canvas>
       <script>
        var xyValues = [
            {x:50,y:7},
            {x:60,y:8},
            {x:70,y:8},
            {x:80,y:9},
            {x:90,y:9},
            {x:100,y:9},
            {x:110,y:10},
            {x:120,y:11},
            {x:130,y:14},
            {x:140,y:14},
            {x:150,y:15},
        ]
         const xValues = xyValues.map((i)=>i.x);
         const yValues = xyValues.map((i)=>i.y);;
         new Chart("demo1",{
            type:"line",
            data:{
                labels:xValues,
                datasets:[{
                    fill:false,
                    // lineTension:0,
                    backgroundColor:"rgba(0,0,255,1.0)",
                    borderColor:"rgba(0,0,0,0.1)",
                    data:yValues
                }]
            },
            options:{
                legend:{display:false},
                scales:{
                    xAxes:[{ticks:{min:40,max:160}}],
                    yAxes:[{ticks:{min:6,max:16}}]
                }
            }
         })
         //this is not complete pratise. excise
       </script>
    </body>
</html>